<template>
  <div class="container">
    <!-- 机巢列表（按状态分类） -->
    <div class="nestBtn_wrap">
      <!--在线-->
      <el-popover
        ref="zaixian"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.online.count === 0"
        trigger="click"
        @hide="clearListStatus()"
        @show="initListStatus(activeStatus.online.areaList)"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'zaixian')">
          <div class="nestList">
            <div
              v-for="area in activeStatus.online.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="changeNest(item)">
                  <div
                    class="nestItem"
                    :class="[
                      currNestCode === item.nest_code ? 'selectedItem' : '',
                    ]"
                    :title="item.nest_name"
                  >
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn onlinestatus"
          ><span>在线: {{ activeStatus.online.count }}</span>
        </el-button>
      </el-popover>
      <!--工作中-->
      <el-popover
        ref="gongzuo"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.flying.count === 0"
        trigger="click"
        @hide="clearListStatus()"
        @show="initListStatus(activeStatus.flying.areaList)"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'gongzuo')">
          <div class="nestList">
            <div
              v-for="area in activeStatus.flying.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="changeNest(item)">
                  <div
                    class="nestItem"
                    :class="[
                      currNestCode === item.nest_code ? 'selectedItem' : '',
                    ]"
                    :title="item.nest_name"
                  >
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn workingstatus"
          ><span>工作中: {{ activeStatus.flying.count }}</span>
        </el-button>
      </el-popover>
      <!--离线-->
      <el-popover
        ref="lixian"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.offline.count === 0"
        trigger="click"
        @hide="clearListStatus()"
        @show="initListStatus(activeStatus.offline.areaList)"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'lixian')">
          <div class="nestList">
            <div
              v-for="area in activeStatus.offline.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="changeNest(item)">
                  <div
                    class="nestItem"
                    :class="[
                      currNestCode === item.nest_code ? 'selectedItem' : '',
                    ]"
                    :title="item.nest_name"
                  >
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn offLinestatus"
          ><span>离线: {{ activeStatus.offline.count }}</span>
        </el-button>
      </el-popover>
      <!--异常-->
      <el-popover
        ref="yichang"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.abnormal.count === 0"
        trigger="click"
        @hide="clearListStatus()"
        @show="initListStatus(activeStatus.abnormal.areaList)"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'yichang')">
          <div class="nestList">
            <div
              v-for="area in activeStatus.abnormal.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="changeNest(item)">
                  <div
                    class="nestItem"
                    :class="[
                      currNestCode === item.nest_code ? 'selectedItem' : '',
                    ]"
                    :title="item.nest_name"
                  >
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn errorstatus"
          ><span>异常: {{ activeStatus.abnormal.count }}</span>
        </el-button>
      </el-popover>
      <!--维保-->
      <el-popover
        ref="weibao"
        placement="top"
        popper-class="mytooltip"
        :visible-arrow="false"
        :enterable="true"
        :disabled="activeStatus.maintenance.count === 0"
        trigger="click"
        @hide="clearListStatus()"
        @show="initListStatus(activeStatus.maintenance.areaList)"
      >
        <div class="nestList_wrap" @click="closePopover($event, 'weibao')">
          <div class="nestList">
            <div
              v-for="area in activeStatus.maintenance.areaList"
              @click.stop="areaClick(area)"
            >
              <div class="area_item">
                <span class="area_name">{{ area[0].areaName }}</span>
                <span class="area_num">共 {{ area.length }} 台</span>
                <svg-icon
                  v-if="listStatus[area[0].areaName]"
                  class="area_icon"
                  icon-class="icon_show"
                />
                <svg-icon v-else class="area_icon" icon-class="icon_hide" />
              </div>
              <div v-show="listStatus[area[0].areaName]" class="nest_wrap">
                <div v-for="item in area" @click.stop="changeNest(item)">
                  <div
                    class="nestItem"
                    :class="[
                      currNestCode === item.nest_code ? 'selectedItem' : '',
                    ]"
                    :title="item.nest_name"
                  >
                    <svg-icon class="iccon" icon-class="message" />
                    <div>{{ item.nest_name }}</div>
                    <svg-icon
                      class="iccon"
                      icon-class="navigate"
                      @click.stop="flyNest(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <el-button slot="reference" class="nestBtn servicestatus"
          ><span>维保: {{ activeStatus.maintenance.count }}</span>
        </el-button>
      </el-popover>
    </div>
  </div>
</template>

<script>
const groupBy = (array, f) => {
  const groups = {};
  array.forEach(function (o) {
    const group = JSON.stringify(f(o));
    groups[group] = groups[group] || [];
    groups[group].push(o);
  });
  return Object.keys(groups).map(function (group) {
    return groups[group];
  });
};
const arrayGroupBy = (list, groupId) => {
  return groupBy(list, function (item) {
    return [item[groupId]];
  });
};

export default {
  name: "BottomNestMenu",
  components: {},
  props: {
    nestCode: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      activeStatus: {
        abnormal: { count: 0, list: [] },
        offline: { count: 0, list: [] },
        online: { count: 0, list: [] },
        flying: { count: 0, list: [] },
        maintenance: { count: 0, list: [] },
      },
      listStatus: {}, // 列表展开状态
      isUavShow: false,
      currNestCode: "",
    };
  },
  computed: {},
  watch: {
    "activeStatus.flying": {
      handler(newVal, oldVal) {
        // count:1
        // list:Array(1)
        // 0:nest_code:"35a4d026-cdc1-4472-9c1f-8c21587717f2"
        // nest_name:"龙游04-湖镇01-政府楼"
        // if (newVal.list)
        this.workingChange(newVal, oldVal);
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.nestCode) {
      this.currNestCode = this.nestCode.repeat(1);
    }
    var that = this;
    that.initBus();
  },
  beforeDestroy() {
    this.removeBus();
  },
  methods: {
    initBus() {
      let that = this;
      that.formatNestData(that.$store.getters.nestStateList);
      that.$bus.on("menuNestStatusListUpdate", (data) => {
        // console.log("menuNestStatusListUpdate", data);
        let nestData = JSON.parse(JSON.stringify(data));
        that.formatNestData(nestData);
      });
    },
    removeBus() {
      this.$bus.$off("menuNestStatusListUpdate");
    },

    changeNest(item) {
      console.log("changeNest", item);
      if (this.currNestCode === item.nest_code) return;
      this.currNestCode = item.nest_code;
      // this.$message(this.currNestCode)
      this.$bus.emit("changeNest", item.nest_code);
      this.$refs["gongzuo"].doClose();
      this.$refs["zaixian"].doClose();
      this.$refs["lixian"].doClose();
      this.$refs["yichang"].doClose();
      this.$refs["weibao"].doClose();

      // this.$emit('openNest', item)
      // if (this.isUavShow) {
      //   this.openUavLayer()
      // }

      // console.log(item)
    },
    areaClick(area) {
      // this.$message('高度' + this.$refs.ref_tooltip_content.offsetHeight)
      const areaName = area[0].areaName;
      this.listStatus[areaName]
        ? (this.listStatus[areaName] = false)
        : (this.listStatus[areaName] = true);
      this.$forceUpdate();
    },
    closePopover(e, ref) {
      if (this.$refs[ref]) {
        this.$refs[ref].doClose();
      }
    },
    clearListStatus() {
      this.listStatus = {};
    },
    initListStatus(areaList) {
      if (!areaList || areaList.length === 0) return;
      areaList.forEach((area) => {
        area.forEach((nest) => {
          if (this.currNestCode === nest.nest_code) {
            const areaName = area[0].areaName;
            this.listStatus[areaName] = true;
          }
        });
      });
      this.$forceUpdate();
    },
    setListStatus() {
      this.listStatus = {};
    },

    flyNest(nest) {
      const nestList = this.$store.getters.nestList;
      var nestInfo = nestList.filter((item) => {
        return item.nest_code === nest.nest_code;
      })[0];
      CesiumUtil.FlyToElementByGPS({
        longitude: nestInfo.position.longitude,
        latitude: nestInfo.position.latitude,
        height: nestInfo.position.altitude,
        distance: 4000,
      });
    },
    formatNestData(data) {
      const reg = /[0-9]+/g;
      Object.keys(data).map((item) => {
        // 生成areaName
        for (let i = 0; i < data[item].list.length; i++) {
          let areaName;
          const strArr = data[item].list[i].city.split(/-|－/);
          if (strArr.length < 2) {
            areaName = "其他";
          } else {
            areaName = strArr[2].replace(reg, "").trim();
          }
          data[item].list[i].areaName = areaName;
        }
        // 通过areaName分组,并把“其他放在最后”
        data[item].areaList = arrayGroupBy(data[item].list, "areaName");
        // 把“其他“放在最后
        let index = -1;
        for (let i = 0; i < data[item].areaList.length; i++) {
          if (data[item].areaList[i][0].areaName === "其他") {
            index = i;
          }
        }
        if (index !== -1) {
          const end = data[item].areaList.splice(index, 1);
          data[item].areaList.push(end[0]);
        }
      });
      if (!this.showTooltip) {
        this.activeStatus = data;
        console.log("activeStatus", data);
      }
    },
    //
    workingChange(newVal, oldVal) {
      if (!oldVal) return;
      if (newVal.count !== oldVal.count) {
        this.$bus.emit("flight_working_change");
        return null;
      }
      //
      const arr = oldVal.list.map((item) => {
        return item.nest_code;
      });
      for (let i = 0; i < newVal.list.length; i++) {
        const nestCode = newVal.list[i].nest_code;
        if (arr.indexOf(nestCode) === -1) {
          this.$bus.emit("flight_working_change");
          return null;
        }
      }
    },
  },
};
</script>
<style lang="scss">
.mytooltip2 {
  background-color: rgba(5, 29, 40, 0);
  box-shadow: none;
}

.mytooltip {
  background-color: rgba(5, 29, 40, 0);
  min-width: 150px;
  height: 300px;
  box-shadow: none;
}

::-webkit-scrollbar {
  display: none;
}

.nestList_wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.nestList {
  border: rgba(0, 255, 255, 0.3) 2px solid;
  border-radius: 4px;
  overflow-y: scroll;
  cursor: pointer;

  .area_item {
    background-color: rgba(5, 29, 40, 0.8);
    display: flex;
    width: 100%;
    min-width: 190px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 3px 5px;
    cursor: pointer;

    &:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    .area_name {
      color: #cccccc;
    }

    .area_num {
      flex: 1;
      margin-right: 40px;
      text-align: right;
      color: grey;
    }

    .area_icon {
      margin-right: 5px;
    }

    .area_name_show {
      color: ghostwhite !important;
    }

    .area_num_show {
      color: ghostwhite !important;
    }
  }

  .area_item_show {
    background-color: rgba(5, 29, 40, 0.6);
  }

  .nest_wrap {
    padding: 3px 5px;
    background-color: rgba(5, 29, 40, 0.4);

    .selectedItem {
      color: #1cc1ff !important;
    }

    .nestItem {
      color: white;
      font-size: 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border: rgba(59, 111, 184, 0.7) 1px solid;

      border-radius: 4px;
      padding: 4px;
      margin: 2px 0;

      &:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }

      & > div {
        width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0 6px;
        text-align: left;
      }

      & > .iccon {
        font-size: 15px;
        margin-left: 3px;
        float: right;

        &:hover {
          color: cyan;
        }
      }
    }
  }

  .layerItem {
    color: white;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;
    margin-bottom: 3px;
    padding: 5px 12px;
    border: 1px solid #1cc1ff;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
    }

    &.active {
      background-color: rgba(85, 170, 255, 0.5);
    }
  }
}
</style>
<style scoped lang="scss">
* {
  caret-color: transparent;
  pointer-events: all;
}

.container {
  width: 100%;

  .nestBtn_wrap {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    padding: 8px 0;
    width: 360px;
    background-repeat: no-repeat;
    background-size: 100%;

    justify-content: center;
    font-size: 12px;
    z-index: 20;
    background-image: radial-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));

    .nestBtn {
      cursor: pointer;
      padding: 4px 8px;
      font-size: 12px;
      border: 1px solid hsla(0, 0%, 100%, 0.4);
      color: hsla(0, 0%, 100%, 0.4);
      background: hsla(0, 0%, 100%, 0.1);
      margin-left: 8px;
      border-radius: 6px;

      &.onlinestatus {
        color: #1cc1ff;
        border: 1px solid #1cc1ff;
        background: rgba(82, 218, 255, 0.1);
      }

      &.workingstatus {
        color: #fd0;
        border: 1px solid #fd0;
        background: rgba(255, 255, 0, 0.1);
      }

      &.offLinestatus {
        color: #fff;
        border: 1px solid #fff;
        background: rgba(255, 255, 255, 0.1);
      }

      &.errorstatus {
        color: #ef2100;
        border: 1px solid #ef2100;
        background: rgba(255, 0, 0, 0.1);
      }

      &.servicestatus {
        color: #bb78ff;
        border: 1px solid #bb78ff;
        background: rgba(170, 85, 255, 0.1);
      }
    }
  }
}
</style>
